<template>
    <div class="movie-list-container">
      <div class="header">
        <h1>热门电影</h1>
        <router-link 
          v-if="authStore.user" 
          to="/movies/add" 
          class="add-btn"
        >
          添加电影
        </router-link>
      </div>
      
      <div class="filters">
        <input
          v-model="searchQuery"
          type="text"
          placeholder="搜索电影..."
          class="search-input"
        >
        <select v-model="selectedCategory" class="category-select">
          <option value="">所有分类</option>
          <option 
            v-for="category in categories" 
            :key="category" 
            :value="category"
          >
            {{ category }}
          </option>
        </select>
      </div>
      
      <div v-if="error" class="error-message">
        {{ error }}
      </div>
      <div v-else-if="loading" class="loading-spinner">
        <div class="spinner"></div>
        加载中...
      </div>
      <div v-else-if="!filteredMovies.length" class="no-movies">
        没有找到符合条件的电影
      </div>
      <div v-else class="movie-grid">
        <div
          v-for="movie in filteredMovies"
          :key="movie.id"
          class="movie-card"
          @click="goToDetail(movie.id)"
        >
          <div class="movie-poster">
            <!-- <img 
              :src="movie.poster || '/placeholder.jpg'" 
              :alt="movie.title"
              @error="handleImageError"
            > -->
          </div>
          <div class="movie-info">
            <h3>{{ movie.title || '未命名电影' }}</h3>
            <div class="meta">
              <span class="rating">
                {{ movie.rating ? `${movie.rating}/10` : '暂无评分' }}
              </span>
              <span class="year">
                {{ movie.year || '年份未知' }}
              </span>
            </div>
            <p class="description">
              {{ truncate(movie.description || '暂无描述', 100) }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { useAuthStore } from '@/stores/auth'
  import api from '@/services/api'
  
  const router = useRouter()
  const authStore = useAuthStore()
  
  const movies = ref([])
  const loading = ref(false)
  const error = ref(null)
  const searchQuery = ref('')
  const selectedCategory = ref('')
  
  const fetchMovies = async () => {
    try {
      loading.value = true
      error.value = null
      const response = await api.getMovies()
      movies.value = Array.isArray(response.data) ? response.data : []
    } catch (err) {
      error.value = err.message || '加载电影列表失败'
      console.error('获取电影失败:', err)
      movies.value = []
    } finally {
      loading.value = false
    }
  }
  
  const categories = computed(() => {
    return [...new Set(
      movies.value
        .map(movie => movie?.category)
        .filter(Boolean)
    )]
  })
  
  const filteredMovies = computed(() => {
    return movies.value.filter(movie => {
      const matchesSearch = 
        (movie.title?.toLowerCase().includes(searchQuery.value.toLowerCase())) ||
        (movie.description?.toLowerCase().includes(searchQuery.value.toLowerCase()))
      const matchesCategory = 
        !selectedCategory.value || 
        movie.category === selectedCategory.value
      return matchesSearch && matchesCategory
    })
  })
  
  const truncate = (text, length) => {
    if (!text) return ''
    return text.length > length ? `${text.substring(0, length)}...` : text
  }
  
  const goToDetail = (id) => {
    if (id) router.push(`/movies/${id}`)
  }
  
  const handleImageError = (event) => {
    event.target.src = '/OIP-C.webp'
  }
  
  onMounted(fetchMovies)
  </script>
  
  <style scoped lang="scss">
  @import '@/styles/movies';
  </style>